<%@ page trimDirectiveWhitespaces="true" language="java"
         contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/mytag" prefix="yjd"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="author" content="m.yijiedai.com">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <style>
        * { margin: 0;padding: 0;list-style: none;}
        a,a:hover { text-decoration: none;}
        .canvans { margin: 30px auto;width: 300px;height: auto;}
        #canvans {margin: 0 auto;}
        .canvans-list { max-width: 640px;height: auto;margin: 0 auto;width: 100%;}
        .canvans-list h1 { text-align: center;color: #fea100;font-size: 24px;margin-bottom: 30px;}
        .canvans-tips { width: 80%;color: #999999;font-size: 16px;line-height: 25px;margin: 0 auto;padding-bottom: 50px;}
        .canvans-btn { width: 90%;height: 50px;display: block;background: #FEA100;color: #fff;text-align: center;line-height: 50px;border-radius: 5px;margin: 0 auto;font-size: 18px;}
    </style>
</head>
<body style="background: #fff;">
<div id="page">
    <div class="canvans">
        <canvas id="canvans" width="300" height="150"></canvas>
    </div>
    <div class="canvans-list">
        <h1>恭喜您，认证成功</h1>
        <a class="canvans-btn" href="mfq://home/order">完成</a>
    </div>
</div>
<script>
    var c=document.getElementById("canvans");
    var ctx=c.getContext("2d");
    var s=0,x=180,y=45;
    ctx.lineWidth=1;
    ctx.strokeStyle = '#FEA100';

    var ss=setInterval(function(){
        ctx.beginPath();
        s=s+0.02;
        if (s>=3.75-1.9){
            ctx.moveTo(x,y);
            if (x>150 && y<85){
                x=x-1.5;
                y=y+2;
                ctx.lineTo(x,y);

            }
            else{
                ctx.moveTo(x,y);
                x--;
                y--;
                ctx.lineTo(x,y);
                if (x<=137 && y<=72){
                    clearInterval(ss)
                }
            }

            ctx.stroke();

            ctx.closePath();

        }else{
            ctx.clearRect(0,0,300,300);
            ctx.arc(150,75,43,Math.PI*1.9,Math.PI*(s+1.9),false);

            ctx.stroke();

        }

    },8);
</script>
</body>

</html>
